<template>
  <div>
    <el-table
      :data="
        fileList.slice((currentPage - 1) * pagesize, currentPage * pagesize)
      "
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column
        prop="examDescription"
        label="考试名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="examLocation"
        label="考试地点"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="examStartTime"
        label="开始时间"
        align="center"
        sortable
      ></el-table-column>
      <el-table-column
        prop="examEndTime"
        label="结束时间"
        align="center"
        sortable
      ></el-table-column>
      <el-table-column
        prop="note"
        label="状态"
        align="center"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="info"
            @click="getRegistrationUserList(scope.row)"
            size="small"
            >查看报名用户</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="报名表" height="500" :visible.sync="userListDialog">
      <el-table :data="allReg">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="realName" label="学生姓名"></el-table-column>
        <el-table-column prop="major" label="学生专业"></el-table-column>
        <el-table-column prop="className" label="学生班级"></el-table-column>
        <el-table-column prop="stuNo" label="学生学号"></el-table-column>
        <el-table-column prop="email" label="联系方式"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import { mapState, mapActions } from 'vuex'
export default {
  inject: ['reload'],
  name: 'fileRegistraion',
  data () {
    return {
      loading: false,
      // 归档表
      fileList: [],
      // 考试信息表
      examList: [],
      // 初始页
      currentPage: 1,
      // 每页的数据
      pagesize: 10,
      // 数组总数
      pageTotal: 100000,
      // 全用户表
      allUser: [],
      // 全报名表
      allReg: [],
      // 显示用户报名表dialog
      userListDialog: false
    }
  },
  computed: {
    ...mapState({
      print: (state) => state.print.all,
      userId: (state) => state.userId.all
    })
  },
  mounted: function () {
    this.getRegistrationList()
  },
  methods: {
    getRegistrationList: function () {
      var that = this
      this.loading = true
      axios
        .all([
          // 归档报名表
          axios({
            headers: { Authorization: this.print.Authorization },
            method: 'get',
            url: '/api/examEntry/record?pageNum&pageSize=100000'
          }),
          // 考试信息表
          axios({
            headers: { Authorization: this.print.Authorization },
            method: 'get',
            url: '/api/examDetail'
          })
        ])
        .then(
          axios.spread(function (fileResponse, examResponse) {
            that.fileList = fileResponse.data.data
            that.examList = examResponse.data.data
            that.pageToatl = fileResponse.data.data.length
            that.getExamInformation()
          })
        )
    },

    getExamInformation: function () {
      this.fileList.forEach((item) => {
        for (var i = 0; i < this.examList.length; i++) {
          if (item.examDetailId == this.examList[i].examDetailId) {
            this.$set(
              item,
              'examDescription',
              this.examList[i].examDescription
            )
            this.$set(item, 'examLocation', this.examList[i].examLocation)
            this.$set(item, 'examStartTime', this.examList[i].examStartTime)
            this.$set(item, 'examEndTime', this.examList[i].examEndTime)
          }
        }
      })
      this.loading = false
    },

    getRegistrationUserList: function (row) {
      var that = this
      this.userList = []
      axios
        .all([
          axios({
            headers: {
              Authorization: this.print.Authorization
            },
            method: 'get',
            url: '/api/users?pageNum&pageSize=1000000'
          }),
          axios({
            headers: { Authorization: this.print.Authorization },
            method: 'get',
            url:
              '/api/userExamEntry/recordByExam?examEntryId=' + row.examEntryId
          })
        ])
        .then(
          axios.spread(function (userResponse, userEntryReponse) {
            that.allUser = userResponse.data.data
            that.allReg = userEntryReponse.data.data
            that.userListDialog = true
            // 显示报名人姓名
            that.allReg.forEach((item) => {
              for (var i = 0; i < that.allUser.length; i++) {
                if (item.userId == that.allUser[i].userId) {
                  that.$set(item, 'email', that.allUser[i].email)
                  var _that = that
                  axios({
                    headers: { Authorization: that.print.Authorization },
                    method: 'get',
                    url: '/api/userInfo?username=' + that.allUser[i].userName
                  }).then(function (reponse) {
                    _that.$set(item, 'realName', reponse.data.data.realName)
                    _that.$set(item, 'major', reponse.data.data.major)
                    _that.$set(item, 'stuNo', reponse.data.data.stuNo)
                    _that.$set(item, 'className', reponse.data.data.className)
                  })
                  i = that.allUser.length
                }
              }
            })
          })
        )
    }
  }
}
</script>
